<template>
      <div>
        <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
          <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
        </ul>
        <div>
          <el-input v-model="Resourcesinput" placeholder="请输入角色id来搜索" clearable style="width: 20%" ></el-input>
          <el-input v-model="Resourcesinput2" placeholder="请输入角色名称来搜索" clearable style="width: 20%" ></el-input>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="selectResources">查询按钮</el-button>
          <el-button type="primary" icon="el-icon-circle-plus" @click="operAddResources">添加资源</el-button>
          <el-button type="primary" icon="el-icon-download" @click="exportResources">导出ecexl</el-button>
          <el-button type="primary" icon="el-icon-upload2" @click="operUploadPage">打开文件导入</el-button>
        </div>
        <div>
          <el-table
            :data="ResourcesTable"  @selection-change="checkResources"
            fixed
            stripe
            style="width: 100%" >
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="resourcesId"
              label="资源id">
            </el-table-column>
            <el-table-column
              prop="url"
              label="url">
            </el-table-column>
            <el-table-column
              prop="path"
              label="路径">
            </el-table-column>
            <el-table-column
              prop="component"
              label="成分">
            </el-table-column>
            <el-table-column
              prop="resourcesName"
              label="资源名称">
            </el-table-column>
            <el-table-column
              prop="iconcls"
              label="图标">
            </el-table-column>
            <el-table-column
            prop="parentid"
            label="节点">
          </el-table-column>
            <el-table-column
              prop="enabled"
              label="启用">
            </el-table-column>
            <el-table-column
              prop="requireauth"
              label="授权">
            </el-table-column>
            <el-table-column
              prop="createdBy"
              label="创建人员">
            </el-table-column>
            <el-table-column
              prop="updateBy"
              label="更新人员">
            </el-table-column>
            <el-table-column
              prop="createdDate"
              label="创建日期">
            </el-table-column>
            <el-table-column
              prop="updateDate"
              label="更新日期">
            </el-table-column>
            <el-table-column label="操作"  fixed="right"   width="200"  header-align="center">
              <template slot-scope="scope"   style="height: 50%; ">
                <el-button size="mini" icon="el-icon-circle-plus" @click="operEditRources(scope.row)">编辑</el-button>
                <el-button size="mini" icon="el-icon-minus"   @click="delResources(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 25, 50, 100]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <el-dialog :title="tableNmae" :visible.sync="dialogFormVisible"  @close="closeResources">
          <el-form :model="ResourcesForm" >
            <el-form-item label="资源id"  v-if="this.Operation!='add' " :label-width="formLabelWidth">
              <el-input v-model="ResourcesForm.resourcesId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="url" :label-width="formLabelWidth" >
              <el-input v-model="ResourcesForm.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路径" :label-width="formLabelWidth" >
              <el-input v-model="ResourcesForm.path" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="成分" :label-width="formLabelWidth" >
            <el-input v-model="ResourcesForm.component" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item label="资源名称" :label-width="formLabelWidth" >
              <el-input v-model="ResourcesForm.resourcesName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth" >
              <el-input v-model="ResourcesForm.iconcls" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="节点" :label-width="formLabelWidth" >
              <el-input v-model="ResourcesForm.parentid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="启用" :label-width="formLabelWidth">
              <el-input v-model="ResourcesForm.enabled" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="授权" :label-width="formLabelWidth">
              <el-input v-model="ResourcesForm.requireauth" autocomplete="off" ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeResources">取 消</el-button>
            <el-button  @click="commitResourcesOperation(Operation)">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="上传文件" :visible.sysible="uploadLabelwidth"  @close="closeResources">
          <el-upload
            class="upload-demo"
            action=""
            drag
            :before-upload="submitUpload"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">目前只支持xls、xlsx格式的文件，目前支持批量添加</div>
          </el-upload>
        </el-dialog>
      </div>
</template>

<script>
    export default {
        name: "ResourcesList",
        data(){
          return{
            //输入框
            Resourcesinput:'',
            Resourcesinput2:'',
            //表格
            ResourcesTable:[],
            //分页器参数
            page:1,
            size:10,
            total:0,
            //获取勾选资源数据
            checkResourcesList:[],
            //增加修改表单数据
            ResourcesForm:{},
            ///增加修改表单页面
            dialogFormVisible:false,
            //设置宽度
            formLabelWidth:"100px",
            //表单名,
            tableNmae:'',
            //操作类型
            Operation:'',
            //上传文件页面
            uploadLabelwidth:false,

          }
        },
      mounted:function () {
          this.selectResources();
      },
      methods:{
        //更改当前页条数
        handleSizeChange(size){
          this.size=size;
          this.selectRole();
        },
        //更改当前页数
        handleCurrentChange(page){
          this.page=page;
          this.selectRole();
        },
          //查询资源信息
            selectResources(){
              this.postRequest("resources/selectResourcex",{
                page:this.page,
                size:this.size,
                resourcesId:this.Resourcesinput,
                resourcesName:this.Resourcesinput2,
              }).then(resp=>{
                if (resp && resp.status == 200) {
                  this.ResourcesTable = resp.data.rows;
                  this.total=resp.data.records;

                }

              })
            },
        //获取资源勾选的数据
        checkResources(selection){
          //勾选数据赋值到checkResourcesList
          this.checkResourcesList=selection;
        },
        //关闭表单
        closeResources(){
              this.ResourcesForm={ };
              this.dialogFormVisible=false;
              this.uploadLabelwidth=false
        },
        //打开添加表单页面
        operAddResources(){
          this.ResourcesForm={ };
          //弹框命名
          this.tableNmae="资源添加";
          this.Operation="add";
          this.dialogFormVisible=true;
        },
        //打开编辑表单页面
        operEditRources(rows){
          //弹框命名
          this.tableNmae="资源修改";
          this.Operation="edit";
          this.dialogFormVisible=true;
          this.$set(this.ResourcesForm,'resourcesId', rows.resourcesId);
          this.$set(this.ResourcesForm,'url',  rows.url);
          this.$set(this.ResourcesForm,'path',  rows.path);
          this.$set(this.ResourcesForm,'component',  rows.component);
          this.$set(this.ResourcesForm,'resourcesName',  rows.resourcesName);
          this.$set(this.ResourcesForm,'iconcls',  rows.iconcls);
          this.$set(this.ResourcesForm,'keepalive',  rows.keepalive);
          this.$set(this.ResourcesForm,'parentid',  rows.parentid);
          this.$set(this.ResourcesForm,'requireauth',  rows.requireauth);

        },
        //提交增加或者编辑数据
        commitResourcesOperation(Operation){
              if(Operation=="add"){
                this.postRequests("resources/addResources",this.ResourcesForm).then(resp=>{
                    //弹出信息
                    this.$message({message:resp.data.errorMsg});
                    //重新查一遍资源数据
                    this.selectResources();
                    this.dialogFormVisible=false;
                })

              }else if(Operation=="edit"){
                this.postRequests("resources/updateResources",this.ResourcesForm).then(resp=>{
                  //弹出信息
                  this.$message({message:resp.data.errorMsg});
                  //重新查一遍资源数据
                  this.dialogFormVisible=false;

                })
              }else{
                //弹出信息
                 this.$message({message:"流程走错了，请联系程序小哥"});
          }
        },
        //删除资源
        delResources(row){
          this.$confirm("是否要删除权限",'提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
          }).then(()=>{
            this.postRequest("resources/delResources",{
              resourcesId:row.resourcesId,
            }).then(resp=>{
              if (resp && resp.status == 200) {
                this.selectResources();
                //弹出信息
                this.$message({message:resp.data.errorMsg});

              }
            })
          }).catch(()=>{
            this.$message({info:'取消删除'});
          });

        },
        //导出资源
        exportResources(){
          window.open("resources/exportResources/?pages="+this.page+'&sizes='+this.size);
        },
        //打开角色导入
        operUploadPage(){
          this.uploadLabelwidth=true;
        },
        //文件上传
        submitUpload(file){
          const form = new FormData();
          form.append('file', file);
          this.uploadFileRequest("resources/importResources",form).then(resp=>{
            if (resp && resp.status == 200) {
              //弹出信息
              this.$message({message:resp.data.errorMsg});
              //刷新页面
              this.selectRole();
              //关闭表单
              this.uploadLabelwidth = false;
            } else {
              //弹出信息
              //  this.$message({message:resp.data.errorMsg});
              //刷新页面
              this.selectRole();
              //关闭表单
              this.uploadLabelwidth = false;
            }
          })

        },
      }

    }
</script>

<style scoped>

</style>
